<section class="tlp-pane">
    <div class="tlp-pane-container">
        <div class="tlp-pane-header">
            <h1 class="tlp-pane-title">Simple pane</h1>
        </div>
        <section class="tlp-pane-section">
            <p>Here goes the content of the pane.</p>
            <p>The pane can have more than one section.</p>
            <p>Far far away, behind the word mountains,
                far from the countries Vokalia and
                Consonantia, ...</p>
        </section>
    </div>
</section>

<section class="tlp-pane">
    <div class="tlp-pane-container">
        <div class="tlp-pane-header">
            <h1 class="tlp-pane-title">Simple pane with tabs</h1>
        </div>
        <nav class="tlp-tabs">
            <a href="javascript:;" class="tlp-tab">Overview</a>
            <a href="javascript:;" class="tlp-tab tlp-tab-active">Comments</a>
            <a href="javascript:;" class="tlp-tab">History</a>
        </nav>
        <section class="tlp-pane-section">
            <p>Here goes the content of the tab in a pane.</p>
            <p>Far far away, behind the word mountains,
                far from the countries Vokalia and
                Consonantia, ...</p>
        </section>
    </div>
</section>

<section class="tlp-pane">
    <div class="tlp-pane-container">
        <div class="tlp-pane-header">
            <h1 class="tlp-pane-title"><i class="tlp-pane-title-icon fa fa-list"></i> Simple pane with table</h1>
        </div>
        <section class="tlp-pane-section">
            <table class="tlp-table">
                <thead>
                    <tr>
                        <th>Firstname</th>
                        <th>Lastname</th>
                        <th>Status</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td>Allen</td>
                        <td>Woody</td>
                        <td>
                            <span class="tlp-badge-success tlp-badge-outline">Active</span>
                        </td>
                    </tr>
                    <tr>
                        <td>George</td>
                        <td>Harrison</td>
                        <td>
                            <span class="tlp-badge-danger tlp-badge-outline">Deleted</span>
                        </td>
                    </tr>
                    <tr>
                        <td>Graam</td>
                        <td>Parson</td>
                        <td>
                            <span class="tlp-badge-success tlp-badge-outline">Active</span>
                        </td>
                    </tr>
                </tbody>
            </table>
        </section>
    </div>
</section>
